<template>
	<navigatorComp :title="`${title}家族族谱`" bgcColor="#121512" fontColor="#fff"></navigatorComp>

	<view class="content">
		<view class="createClan_inputBox">
			<view class="createClan_posterBox">
				<!-- <image class="createClan_image" :src="`http://112.124.50.179:8888/imgs/home/clan_${frontCoverUrl}.png`"></image> -->
				<image
					class="createClan_image"
					v-if="clanForm.frontCoverUrl == 1"
					src="http://112.124.50.179:8888/imgs/home/clan_1.png"
				></image>
				<image
					class="createClan_image"
					v-if="clanForm.frontCoverUrl == 2"
					src="http://112.124.50.179:8888/imgs/home/clan_2.png"
				></image>
				<image
					class="createClan_image"
					v-if="clanForm.frontCoverUrl == 3"
					src="http://112.124.50.179:8888/imgs/home/clan_3.png"
				></image>
				<image
					class="createClan_image"
					v-if="clanForm.frontCoverUrl == 4"
					src="http://112.124.50.179:8888/imgs/home/clan_4.png"
				></image>
				<image
					class="createClan_image"
					v-if="clanForm.frontCoverUrl == 5"
					src="http://112.124.50.179:8888/imgs/home/clan_5.png"
				></image>
				<view class="imgText">家族族谱</view>
			</view>
			<view class="poster_title">封面设置</view>
			<view class="poster_bgc_list">
				<view
					v-for="(item, index) in posterBgcList"
					class="poster_bgc display_flex"
					:style="{ backgroundColor: item }"
					@click="clanForm.frontCoverUrl = index + 1"
				>
					<u-icon
						v-if="clanForm.frontCoverUrl == index + 1"
						name="checkbox-mark"
						color="#FFF"
						size="20"
					></u-icon>
				</view>
			</view>

			<u-form
				label-width="100"
				label-style="font-size:28rpx;color: #FFFFFF;"
				:model="clanForm"
				ref="uForm"
			>
				<u-form-item label="创建始祖:" prop="genealogySurname" required labelWidth="140rpx">
					<view class="display_flex ancester_inputBox">
						<view style="width: 88rpx; margin-right: 16rpx">
							<u-input
								v-model.trim="clanForm.genealogySurname"
								color="#fff"
								fontSize="28rpx"
								border="bottom"
								placeholder=""
								inputAlign="center"
								maxlength="2"
							/>
						</view>
						<view style="margin-right: 16rpx">氏祖第</view>
						<view style="width: 88rpx; margin-right: 16rpx">
							<u-input
								v-model.trim="clanForm.painame"
								color="#fff"
								fontSize="28rpx"
								border="bottom"
								placeholder=""
								inputAlign="center"
								maxlength="2"
							/>
						</view>
						<view>世派下开基</view>
					</view>
				</u-form-item>
				<u-form-item label="祠堂名称:" prop="genealogyName" required>
					<u-input
						v-model.trim="clanForm.genealogyName"
						color="#fff"
						fontSize="28rpx"
						border="none"
						placeholder="请输入祠堂名称"
						clearable
						maxlength="10"
						inputAlign="right"
					/>
				</u-form-item>
				<u-form-item label="始祖名称:" prop="ancestorName" required>
					<u-input
						v-model.trim="clanForm.ancestorName"
						color="#fff"
						fontSize="28rpx"
						border="none"
						placeholder="请输入始祖名称"
						clearable
						maxlength="20"
						inputAlign="right"
					/>
				</u-form-item>
				<u-form-item
					label="族谱简介:"
					prop="summarized"
					labelPosition="top"
					labelWidth="300rpx"
				>
					<view class="createClan_inputBox_summarized">
						<!-- :adjustPosition="false" -->
						<up-textarea
							disableDefaultPadding
							placeholderClass="placeholderClass"
							color="#fff"
							fontSize="28rpx"
							v-model="clanForm.summarized"
							placeholder="请输入简介"
							height="270rpx"
							border="none"
							count
							maxlength="200"
						></up-textarea>
					</view>
				</u-form-item>
			</u-form>
			<!-- 免费创建族谱 -->
		</view>
		<footerBtn
			bgcColor="#121512"
			:btnDisable="btnDisable"
			:name="
				isEdit
					? '确认修改'
					: coinNumber
					? coinNumber > myYbNumber
						? '福币不足，去充值'
						: `${coinNumber}福币创建族谱`
					: '免费创建族谱'
			"
			@clickBtn="handleClan"
		>
			<!-- 新增 -->
			<view v-if="!isEdit" style="width: 40rpx; height: 40rpx; margin-right: 10rpx">
				<!-- 免费创建 -->
				<image
					v-if="!coinNumber"
					style="width: 40rpx; height: 40rpx"
					:src="imgUrl + 'imgs/home/add_memory.png'"
					mode=""
				></image>
				<!-- 付费创建，余额充足 -->
				<image
					v-if="coinNumber"
					style="width: 40rpx; height: 40rpx"
					:src="imgUrl + 'imgs/home/coin.png'"
					mode=""
				></image>
			</view>
		</footerBtn>
	</view>
</template>

<script setup>
import { onMounted, ref, reactive, nextTick, getCurrentInstance, watchEffect } from 'vue';
import { onLoad, onShow, onUnload } from '@dcloudio/uni-app';
import navigatorComp from '/components/navigator/index.vue';
import pickerAddress from '/components/picker/addressPicker.vue';
import footerBtn from '/components/footerBtn/index.vue';
import { imgUrl } from '@/external/utils/imgUrl';
import store from '@/store/index.js';
import HomeApi from '@/API/home/index.js';
import CommonApi from '@/API/commenApi';
import _ from 'lodash';
const homeApi = new HomeApi();
const commonApi = new CommonApi();

const posterBgcList = ['#1A385E', '#BD2B4A', '#AC7631', '#852ABD', '#33AE73'];

const btnDisable = ref(true);
const clanForm = reactive({
	genealogyId: 0,
	frontCoverUrl: 1, //封面图片
	genealogyName: '',
	genealogySurname: '',
	ancestorName: '',
	ancestralHomeland: '',
	summarized: ''
});
const isAggrement = ref(0);
const address = ref();
const height = ref(0);
const title = ref('新增');
const isEdit = ref(false); //是否是编辑页
const coinNumber = ref(0); //福币支付数量
const myYbNumber = ref(0); //我的福币余额

watchEffect(() => {
	if (
		clanForm.genealogySurname !== '' &&
		clanForm.painame !== '' &&
		clanForm.ancestorName !== '' &&
		clanForm.ancestralHallName !== ''
	) {
		btnDisable.value = false;
	} else {
		btnDisable.value = true;
	}
});

onLoad((options) => {
	if (options.genealogyId) {
		title.value = '编辑';
		isEdit.value = true;
		clanForm.genealogyId = options.genealogyId;
		getGenealogyInfo();
	} else {
		title.value = '新增';
		isEdit.value = false;
		getIsPay();
	}
});

onMounted(() => {
	// #ifdef MP-WEIXIN
	height.value =
		uni.getSystemInfoSync().screenHeight -
		getApp().globalData.bottom -
		getApp().globalData.navHeight;
	// #endif

	// #ifdef APP || H5
	height.value =
		uni.getSystemInfoSync().screenHeight -
		getApp().globalData.bottom -
		getApp().globalData.navHeight -
		uni.upx2px(88);
	// #endif
});

onShow(() => {
	// 获取个人的福币信息
	getUserInfo();
});

/**
 * 获取个人信息
 */
const getUserInfo = async () => {
	await store.dispatch('setUserInfo');
	myYbNumber.value = store.state.userInfo.userInfo.ybCoinNumber;
};

/**
 * 是否免费创建
 */
const getIsPay = async () => {
	let res = await commonApi.getConsumeList({ pos: 3 });
	if (res.code === 0) {
		coinNumber.value = res.data.items[0].number;
	}
};

const getGenealogyInfo = () => {
	uni.showLoading();
	homeApi
		.getGenealogyInfo({
			genealogyId: clanForm.genealogyId
		})
		.then((res) => {
			if (res.code === 0) {
				Object.keys(clanForm).forEach((item) => {
					if (item != 'genealogyId') {
						clanForm[item] = res.data[item];
					}
				});
				clanForm.painame = res.data.paiName;
				clanForm.ancestralHomeland = res.data.ancestralHomeland.replace(/,/g, '');
				address.value = res.data.ancestralHomeland.split(',');
			}
			uni.hideLoading();
		});
};

const changeAddress = (e) => {
	if (e.data) {
		address.value = JSON.parse(JSON.stringify(e.data));
		clanForm.ancestralHomeland = e.data.join('');
	}
};

/**
 * 校验数据
 */
const validate = () => {
	if (clanForm.genealogySurname.trim() === '' || clanForm.painame.trim() === '') {
		uni.showToast({
			title: '请补全创建始祖',
			icon: 'none'
		});
		return false;
	} else if (clanForm.genealogyName.trim() === '') {
		uni.showToast({
			title: '请输入祠堂名称',
			icon: 'none'
		});
		return false;
	} else if (clanForm.ancestorName.trim() === '') {
		uni.showToast({
			title: '请输入始祖名称',
			icon: 'none'
		});
		return false;
	}
	return true;
};

/**
 * 防抖
 */
const handleClan = _.debounce(
	() => {
		editClan();
	},
	2000,
	{ leading: true, trailing: false }
);

/**
 * 点击创建/修改族谱
 */
const editClan = () => {
	//福币余额不足，去充值
	if (myYbNumber.value < coinNumber.value) {
		goUrl('/subPages/mine/cloudCoin/recharge');
		return;
	}

	uni.showLoading();
	if (!validate()) {
		return;
	}
	let params = {
		frontCoverUrl: clanForm.frontCoverUrl,
		genealogySurname: clanForm.genealogySurname,
		painame: clanForm.painame,
		genealogyName: clanForm.genealogyName,
		ancestorName: clanForm.ancestorName,
		summarized: clanForm.summarized,
		genealogyId: clanForm.genealogyId,
		opType: isEdit.value ? 2 : 1 //（1:创建，2:修改）
	};
	homeApi.createGenealogy(params).then((res) => {
		uni.hideLoading();
		if (res.code === 0) {
			uni.showToast({
				title: isEdit.value ? '编辑成功!' : '创建成功！',
				duration: 500
			});
			setTimeout(() => {
				uni.navigateBack();
			}, 500);
		}
	});
};

const goUrl = (url) => {
	uni.navigateTo({
		url: url
	});
};
</script>

<style lang="scss">
page {
	background-color: #121512;
	/* #ifdef H5 */
	padding-top: 0;
	/* #endif */
	box-sizing: border-box;
}

.content {
	padding: 0;
	overflow: auto;
}

.createClan_inputBox {
	margin: 0 32rpx 40rpx 32rpx;
	background: linear-gradient(225deg, rgba(41, 43, 42, 0.5) 0%, rgba(138, 145, 142, 0.5) 100%);
	border-radius: 8rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 40rpx 32rpx 32rpx 40rpx;
	box-sizing: border-box;

	.createClan_posterBox {
		position: relative;

		image {
			width: 168rpx;
			height: 240rpx;
		}

		.imgText {
			font-family: '宋体';
			font-weight: 600;
			font-size: 28rpx;
			color: #000000;
			line-height: 35rpx;
			position: absolute;
			right: 20rpx;
			top: 20rpx;
			writing-mode: vertical-lr;
			letter-spacing: 3rpx;
		}

		.fuxinText {
			font-family: '宋体';
			font-weight: 600;
			font-size: 25rpx;
			color: #000000;
			top: 20rpx;
			right: 22rpx;
		}
	}

	.ancester_inputBox {
		font-weight: 400;
		font-size: 28rpx;
		color: #ffffff;
		line-height: 33rpx;

		::v-deep .u-border-bottom,
		.up-border-bottom {
			border-color: #666666 !important;
		}

		::v-deep .u-input {
			color: #ffffff !important;
			padding: 0 16rpx !important;
		}
	}

	.createClan_image {
		width: 160rpx;
		height: 240rpx;
		margin-bottom: 24rpx;
	}

	.poster_title {
		font-weight: 400;
		font-size: 24rpx;
		color: #ffffff;
		line-height: 28rpx;
		margin-bottom: 24rpx;
	}

	.poster_bgc_list {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 56rpx;
		width: 328rpx;
		// gap: 32rpx;

		.poster_bgc {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.createClan_input {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	::v-deep .u-form {
		width: 100%;
		padding-left: 10rpx;
		box-sizing: border-box;
	}

	::v-deep .input-placeholder {
		color: #999999 !important;
		font-weight: 400 !important;
		font-size: 28rpx !important;
		line-height: 33rpx !important;
	}

	::v-deep .u-form-item__body__right__content__slot {
		display: flex !important;
		align-items: center !important;
		justify-content: flex-end !important;
	}

	::v-deep .u-form-item__body {
		padding: 0 !important;
		margin-bottom: 32rpx !important;
	}

	.placeHolder {
		font-weight: 400;
		font-size: 28rpx;
		color: #999999;
		line-height: 33rpx;
		text-align: right;
	}

	.value {
		color: #ffffff;
	}

	.arrow_right {
		width: 40rpx;
		height: 40rpx;
	}
}

.createClan_inputBox_summarized {
	width: 100%;
	margin-top: 24rpx;

	::v-deep .placeholderClass {
		font-weight: 400 !important;
		font-size: 28rpx !important;
		color: #999999 !important;
		line-height: 33rpx !important;
	}

	::v-deep .u-textarea {
		background: rgba(255, 255, 255, 0.1) !important;
		padding: 32rpx 40rpx !important;
		box-sizing: border-box !important;
	}

	::v-deep .u-textarea__field {
		color: #fff !important;
		font-size: 28rpx !important;
		text-align: justify !important;
	}

	::v-deep .u-textarea__count {
		background: none !important;
		font-weight: 400 !important;
		font-size: 28rpx !important;
		color: #999999 !important;
		line-height: 33rpx !important;
		margin-right: 25rpx;
		margin-bottom: 24rpx;
		padding: 0;
	}
}

.createClan_inputBox_tip {
	font-weight: 400;
	font-size: 24rpx;
	color: #999999;
	line-height: 36rpx;
	justify-content: flex-start;
	margin-left: 32rpx;
	margin-top: -14rpx;
}
</style>
